<template>
	<cl-page background-color="#f1f1f1" :fullscreen="true" :statusBar="false">
		<cl-sticky>
			<cl-topbar
				:border="false"
				background-color="#fff"
				color="#0C81F7"
				:title="id ? t('invoice.edit_title') : t('invoice.add_title')"
				titleColor="#333"
				:moreTit="t('invoice.save')"
				@more="submit"
			/>
		</cl-sticky>
		<view class="page-add animate__animated animate__fadeIn">
			<cl-form ref="Form" v-model="form" :rules="rules" label-width="150rpx">
				<view class="text">{{ $t("invoice.text_o") }}</view>
				<view class="formInfo">
					<cl-form-item label="">
						<cl-radio-group v-model="form.type" @change="changeRadio">
							<cl-radio label="1"> {{ $t("invoice.company") }} </cl-radio>
							<cl-radio label="2"> {{ $t("invoice.personal") }} </cl-radio>
						</cl-radio-group>
					</cl-form-item>
					<cl-form-item class="required" :label="t('invoice.name')" prop="name">
						<cl-input
							v-model="form.name"
							:border="false"
							:placeholder="t('invoice.name_p')"
							placeholder-class="placeholder"
							maxlength="11"
						></cl-input>
					</cl-form-item>
					<cl-form-item
						v-if="form.type == 1"
						class="required"
						:label="t('invoice.duty')"
						prop="duty"
					>
						<cl-input
							v-model="form.duty"
							:border="false"
							:placeholder="t('invoice.duty_p')"
							placeholder-class="placeholder"
						>
						</cl-input>
					</cl-form-item>
					<cl-form-item :label="t('invoice.default_header')">
						<cl-switch v-model="form.header" style="float: right"></cl-switch>
					</cl-form-item>
					<cl-form-item v-if="form.type == 1" :label="t('invoice.company_address')">
						<cl-input
							v-model="form.company_address"
							:border="false"
							:placeholder="t('invoice.company_address_p')"
							placeholder-class="placeholder"
						></cl-input>
					</cl-form-item>
					<cl-form-item v-if="form.type == 1" :label="t('invoice.tel_phone')">
						<cl-input
							type="number"
							v-model="form.tel_phone"
							:border="false"
							:placeholder="t('invoice.tel_phone_p')"
							placeholder-class="placeholder"
						></cl-input>
					</cl-form-item>
					<cl-form-item v-if="form.type == 1" :label="t('invoice.bank')">
						<cl-input
							v-model="form.bank"
							:border="false"
							:placeholder="t('invoice.bank_p')"
							placeholder-class="placeholder"
						></cl-input>
					</cl-form-item>
					<cl-form-item v-if="form.type == 1" :label="t('invoice.bank_account')">
						<cl-input
							type="number"
							v-model="form.bank_account"
							:border="false"
							:placeholder="t('invoice.bank_account_p')"
							placeholder-class="placeholder"
						></cl-input>
					</cl-form-item>
				</view>
				<view class="text">{{ $t("invoice.text_t") }}</view>
				<view class="formInfo">
					<cl-form-item :label="t('invoice.phone')">
						<cl-input
							v-model="form.phone"
							type="number"
							:border="false"
							:placeholder="t('invoice.phone_p')"
							placeholder-class="placeholder"
							maxlength="11"
						></cl-input>
					</cl-form-item>
					<cl-form-item :label="t('invoice.email')">
						<cl-input
							v-model="form.email"
							:border="false"
							:placeholder="t('invoice.email_p')"
							placeholder-class="placeholder"
							maxlength="11"
						></cl-input>
					</cl-form-item>
				</view>
			</cl-form>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { user } = useStore();
const app = useApp();
const ui = useUi();
const Form = ref<ClForm.Ref>();
const id = ref();
const form = reactive<any>({
	type: "1",
	name: "",
	duty: "",
	header: true,
	company_address: "",
	tel_phone: "",
	bank: "",
	bank_account: "",
	phone: "",
	email: "",
});

const rules = reactive<any>({
	name: {
		required: true,
		message: t("invoice.name_p"),
	},
	duty: {
		required: true,
		message: t("invoice.duty_p"),
	},
});

onReady(() => {
	if (router.params.id || router.query.id) {
		id.value = router.params.id || router.query.id;
	}
});

const changeRadio = (e: any) => {
	form.type = e;
};

const submit = () => {
	Form.value?.validate((valid, errors) => {
		if (valid) {
			console.log(form);
		}
	});
};
</script>

<style lang="scss" scoped>
.page-add {
	position: relative;
	box-sizing: border-box;
	padding: 30rpx;
	.text {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		margin-bottom: 22rpx;
	}
	.formInfo {
		padding: 0 30rpx;
		background-color: #fff;
		margin-bottom: 35rpx;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
		border-radius: 20rpx;
		:deep(.cl-form-item__label) {
			height: auto !important;
		}
	}
	:deep(.cl-radio__label) {
		font-size: 34rpx;
		color: #333;
	}
	:deep(.is-checked) {
		.cl-radio__input {
			background-color: #0c81f7;
		}
	}
	:deep(.uni-switch-input-checked) {
		background-color: rgb(76, 217, 100) !important;
		border-color: rgb(76, 217, 100) !important;
	}
	.required {
		:deep(.cl-form-item__label) {
			&::after {
				content: "*";
				color: #ff0000;
				font-size: 34rpx;
			}
		}
	}
}
</style>
